<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title>下载列表</title>
	<link rel="stylesheet" href="${prc}/css/bootstrap.min.css" />
	<link rel="stylesheet" href="${prc}/layui/css/layui.css" media="all"/>
	<link rel="stylesheet" href="${prc}/layui/css/modules/layer/default/layer.css" media="all"/>
	<link rel="stylesheet" href="${prc}/css/bootstrap-tableCss/bootstrap-table.css" />
	<script type="text/javascript" src="${prc}/js/jquery.min.js" ></script>
	<script type="text/javascript" src="${prc}/js/bootstrap.min.js" ></script>
	<script type="text/javascript" src="${prc}/layui/layui.js" ></script>
	<script type="text/javascript" src="${prc}/layui/lay/modules/layer.js" ></script>
	<script type="text/javascript" src="${prc}/js/bootstrap-tableJs/bootstrap-table.js" ></script>
	<script type="text/javascript" src="${prc}/js/bootstrap-tableJs/bootstrap-table-zh-CN.js" ></script>
</head>
<body>
<table id="test-table" class="col-xs-12" data-toolbar="#toolbar"></table>
		<script type="text/javascript">
			$(document).ready(function () { 
				initTable();
			})
			
			function initTable() {
				$('#test-table').bootstrapTable({
					method: 'post',
					toolbar: '#toolbar',
					striped: true,
					cache: false,
					pagination: true, 
					sortOrder: "ID asc", 
					pageNumber: 1,
					pageSize: 10,
					pageNumber: 1,
					pageList: [20, 50, 100, 150],
					url:"${prc}/files/filesList",
					sidePagination:"client",
					search: true,
					strictSearch: false,
					searchOnEnterKey:true,
					searchText:"",
					showColumns: true,
					showRefresh: true,
					minimumCountColumns: 2,             //最少允许的列数
            		clickToSelect: true,                //是否启用点击选中行
            		height: 500,
            		showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            		cardView: false,                    //是否显示详细视图
            		detailView: false,
            		uniqueId: "FilesId",
            		columns: [{
            	        title: 'ID',
            	        field: 'FilesId',
            	        align: 'center',
            	        valign: 'middle',
            	    },{
            			field: 'FilesName',
            			align: 'center',
                		title: '文件名',
            		},{
            			field: 'FilesPath',
            			align: 'center',
                		title: '路径',
            		},{
            			field: 'FilesSize',
            			align: 'center',
                		title: '文件大小',
            		},{
            			field: 'FilesTime',
            			align: 'center',
                		title: '上传时间',
            		},{
            	        title: '操作',
            	        field: 'FilesId',
            	        align: 'center',
            	        formatter:function(value,row,index){
            	            var e = '<a href="${prc}/download/download?filename='+row.FilesName+'" class="btn btn-default" mce_href="#">下载</a> ';
            	            var d = '<button href="#" id="but" class="btn btn-default example-image-link" mce_href="#" onclick="showQrCode(\''+ row.FilesName + '\')">二维码</button> ';/* onclick="alert(\''+ row.FilesName + '\')"*/
            	            return e+d;
            	          }
            			}
            		]
				});
			}
			
			function showQrCode(name){
				layer.open({
			        type: 1,
			        title: "手机扫描二维码",
			        closeBtn: false,
			        area: '350px',
			        offset: ['100px','450px'],
			        shade: 0.8,
			        id: 'LAY_layuipro',
			        btn: ['关闭'],
			        moveType: 1,
			        content: '<img src="${prc}/files/QrCode?QrCoudeUrl='+name+'" width="350" alt=""/>',
			        success: function(layero){
						var btn = layero.find('.layui-layer-btn');
						btn.css('text-align', 'center');
						btn.on("click",function(){
							window.sessionStorage.setItem("#but","true");
						})
 						if($(window).width() > 432){  //如果页面宽度不足以显示顶部“系统公告”按钮，则不提示
							btn.on("click",function(){
								layer.tips('扫描二维码躲在了这里', '#but', {
									tips: 3
								});
							})
						} 
			        }
			    });
			}
		</script>
</body>
</html>